<template>
    <div class='bx'>
        <el-col class="docketprint" id="printMe" ref="printContent">
       <div class='tab'>
           <div style='width:50%;margin-bottom:10px;text-align:center'>模板名称:<el-input :disabled="true" v-model="form.templateName" style='width:280px'></el-input></div>

           <table border="1" cellspacing="0" cellpadding="5" align="center" width="50%">
               <tr>
                   <td colspan="4"><h2>成绩单</h2></td>
               </tr>
               <tr>
                   <td>姓名</td>
                   <td><input :disabled="true" v-model="form.name"></td>
                   <td>学院</td>
                   <td><input :disabled="true" v-model="form.college"></td>
               </tr>
               <tr>
                   <td>专业</td>
                   <td><input :disabled="true" v-model="form.major"></td>
                   <td>班级</td>
                   <td><input :disabled="true" v-model='form.classRoom'></td>
               </tr>
               <tr>
                   <td>科目</td>
                   <td>分数</td>
                   <td>评价</td>
                   <td style='width:25%'>是否补考</td>
               </tr>
               <tr v-for="(item, index) in form.situation" :key="index">
                   <td><input :disabled="true" v-model="item.subjects"></td>
                   <td><input :disabled="true" v-model="item.grade"></td>
                   <td><input :disabled="true" v-model="item.evaluate"></td>
                   <td><input :disabled="true" v-model="item.ifresit"></td>
                    <!-- <td style='border:none'><el-button @click='removeOptionItem(index)'>删除</el-button></td> -->
               </tr>
           </table>
       </div>
        </el-col>
           <el-button style='margin-left:43%;margin-top:20px;' v-print="printObj">打印</el-button>
    </div>
</template>

<script>

export default {
   data() {
       return {
           printObj: {
        id: "printMe", //打印区域 Dom ID
        popTitle: "打印页面标题文字",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead:
          '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>' //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
           form:{
           situation:[],
           templateName:'',
           name:'',
           college:'',
           major:'',
           templateId:'',
           classRoom:''
        },
        List:[],
       }
   },
    mounted() {
         this.List=this.$route.params.list;
         console.log('456',this.List)
         this.form.templateName=this.List.templateName
         this.form.name=this.List.name
         this.form.college=this.List.college
         this.form.major=this.List.major
         this.form.classRoom=this.List.classRoom
         this.form.situation=JSON.parse(this.List.situation)
         this.form.templateId=this.List.templateId

    },
    methods: {

    },
};
</script>

<style lang='scss' scoped >
.bx{
    width: 100%;
    height: 100%;
    .tab{
        margin-top: 5%;
        margin-left: 30%;
    }
}
tr{
    text-align: center;
    height: 100px;
    td{
        width: 100px;
        height: 100px;
    }
}
input{
  width:100%;
  height:100px;
  border:none;
  text-align: center;
  background:none;
}
</style>
